import React, { useState, FC, useEffect } from 'react';
import CoolPlayer from 'react-cool-music-player';
//import 'react-cool-music-player/dist/index.css'
import styles from './player.less';
import './player.css';

import { request, ConnectProps, PlayerModelState, connect } from 'umi';
import Selected from '@/pages/dj/selected/selected';
import Default from '@/pages/dj/default/default';

interface PageProps extends ConnectProps {
  playerModel: PlayerModelState;
  dispatch: any;
}

const Player: FC<PageProps> = ({ playerModel, dispatch }: any) => {
  const [playData, setPlayData] = useState([]);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    if (playerModel.songIdList.length > 0) {
      getData();
    }
  }, []);

  const getData = () => {
    dispatch({
      type: 'playerModel/getSongData',
      payload: {
        songIdList: playerModel.songIdList.toString(),
      },
    }).then((res: any) => {
      let arr: any = [];
      res.forEach((item: any) => {
        arr.push({
          src: item.songUrl,
          artist: item.ar[0].name,
          name: item.name,
          img: item.al.picUrl,
          id: item.id,
        });
      });
      setPlayData(arr);
    });
  };

  const onAudioChange = (id: any, currentMusic: any) => {
    console.log(id, currentMusic);
  };

  let Player = () => {
    if (playData.length > 0) {
      return <CoolPlayer data={playData} onAudioChange={onAudioChange} />;
    } else {
      if (playerModel.songIdList.length > 0 && !loading) {
        getData();
        setLoading(true);
      }
      return <div></div>;
    }
  };

  return (
    <div className="player">
      <div className={styles.wrapper}>
        <div className={styles.container}>
          <Player></Player>
        </div>
      </div>
    </div>
  );
};

export default connect(
  ({ playerModel }: { playerModel: PlayerModelState }) => ({ playerModel }),
)(Player);
